<template>
  <el-row class="row">
    <el-col
      :span="12"
      class="bg"
      style="
        color: white;
        font-size: 40px;
        text-align: center;
        line-height: 100vh;
        font-weight: 700;
      "
      >大事件项目</el-col
    >
    <el-col :span="6" :offset="3">
      <!-- el-forem表单-登录 -->
      <el-form
        ref="form"
        :model="formdata"
        :rules="rules"
        v-if="islogin"
        size="large"
        autocomplete="off"
        class="login"
      >
        <el-form-item><h1>登录</h1></el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formdata.username"
            class="el-input"
            name="user"
            prefix-icon="User"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formdata.password"
            class="el-input"
            name="password"
            prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="threecol">
          <el-checkbox label="记住我" class="save" />
          <a href="">忘记密码？</a>
        </el-form-item>
        <el-form-item class="logincol" @click="login">
          <span>登录</span>
        </el-form-item>
        <el-form-item class="toregister"
          ><span @click="setislogin()">注册--></span></el-form-item
        >
      </el-form>
      <!-- el-forem表单-注册 -->
      <el-form
        ref="form"
        :model="formdata"
        :rules="rules"
        v-else
        size="large"
        autocomplete="off"
        class="register"
      >
        <el-form-item><h1>注册</h1></el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formdata.username"
            name="user"
            prefix-icon="User"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formdata.password"
            name="password"
            prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="formdata.repassword"
            name="repassword"
            prefix-icon="Lock"
            type="password"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="threecol">
          <el-checkbox label="记住我" class="save" />
          <a href="">忘记密码？</a>
        </el-form-item>
        <el-form-item class="logincol" @click="register">
          <span>注册</span>
        </el-form-item>
        <el-form-item class="toregister"
          ><span @click="setislogin()">登录--></span></el-form-item
        >
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { userregisterservice, userloginservice } from '@/api/user.js'
import { useuserstore } from '@/stores/modules/user.js'
import { useRouter } from 'vue-router'
let userstore = useuserstore()
const islogin = ref(true)
function setislogin() {
  islogin.value = !islogin.value
}
// 当islogin发生改变时重置formdata数据
watch(islogin, () => {
  formdata = reactive({
    username: '',
    password: '',
    repassword: ''
  })
})
// 注册表单的校验
// el-input只用使用双向数据绑定才能使用
let formdata = reactive({
  username: '',
  password: '',
  repassword: ''
})
// let formdata = userstore.formdata
const rules = reactive({
  username: [
    { required: true, message: '不能为空', trigger: 'blur' }, //非空校验
    { min: 5, max: 16, message: '长度只能是5-16位', trigger: 'blur' } //长度校验
    //只能是数字
  ],
  password: [
    { required: true, message: '不能为空', trigger: 'blur' }, //非空校验
    { pattern: /^\w+$/, message: '只能是数字或字母', trigger: 'blur' }, //只能是数字
    { min: 5, max: 16, message: '长度只能是5-16位', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '不能为空', trigger: 'blur' }, //非空校验
    { pattern: /^\w+$/, message: '只能是数字或字母', trigger: 'blur' }, //只能是数字
    { min: 5, max: 16, message: '长度只能是5-16位', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        //value是input的value,callback校验成功或失败时调用
        if (value !== formdata.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() //校验成功
        }
      },
      trigger: 'blur'
    }
  ]
})

const form = ref()
const register = async () => {
  // 发送注册请求前form自校验
  await form.value.validate()
  // 发送注册请求
  const res = await userregisterservice(formdata)
  if (res.data.code == 0) {
    ElMessage.success('注册成功')
    islogin.value = true
  }
}
const router = useRouter()
const login = async () => {
  await form.value.validate()
  // 发生登录请求
  const res = await userloginservice(formdata)
  // 将响应体中的token存储到本地
  console.log(res)
  userstore.settoken(res.data.token)
  if (res.data.code == 0) {
    userstore.formdata.nowusername = formdata.username
    userstore.formdata.password = formdata.password
    ElMessage.success('登录成功')
    router.push('/')
  } else {
    ElMessage.warning('用户名或密码错误！')
  }
}
</script>
<style scoped lang="less">
* {
  box-sizing: border-box;
}

.row {
  height: 100vh;
  .bg {
    background-image: url('./login-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .login {
    margin-top: 0.703rem;
    .threecol {
      position: relative;
      .save {
        margin-right: 0.0879rem;
      }
      a {
        position: absolute;
        right: 0;
      }
    }
    .logincol {
      &:hover {
        opacity: 0.7;
        cursor: pointer;
      }
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 255, 0.55);
      span {
        display: block;
        width: 100%;
        color: white;
        text-align: center;
      }
    }
    .toregister {
      span {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .register {
    margin-top: 0.703rem;
    .threecol {
      position: relative;
      .save {
        margin-right: 0.0879rem;
      }
      a {
        position: absolute;
        right: 0;
      }
    }
    .logincol {
      &:hover {
        opacity: 0.7;
        cursor: pointer;
      }
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 255, 0.55);
      span {
        display: block;
        width: 100%;
        color: white;
        text-align: center;
      }
    }
    .toregister {
      span {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
